<script setup lang="ts">
import { ref } from 'vue';
let gap = ref<string>('10px');
let checked = ref<number | undefined>(undefined);
let data = ref([
    {
        cover: {
            title: '春季',
            description: '春季开始，天气逐渐回暖，花草开始绽放.',
            ltTip: 'Year:2023',
            lbTip: 'Tip:以上都是模拟数据'
        },
        data: [
            { label: '统计数', value: 1000, unit: '件' },
            { label: '优良数', value: 1000 },
            { label: '损坏数', value: 1000 },
        ]
    },
    {
        cover: {
            title: '夏季',
            description: '夏季正式开始，气温升高，白天较长，阳光明媚.',
            ltTip: 'Year:2023',
            lbTip: 'Tip:以上都是模拟数据'
        },
        data: [
            { label: '统计数', value: 1000 },
            { label: '优良数', value: 1000, unit: '个' },
            { label: '损坏数', value: 1000 },
        ]
    },
    {
        cover: {
            title: '秋季',
            description: '天气逐渐凉爽，秋意渐浓，夜晚较凉.',
            ltTip: 'Year:2023',
            lbTip: 'Tip:以上都是模拟数据'
        },
        data: [
            { label: '统计数', value: 1000, unit: '件' },
            { label: '优良数', value: 1000 },
            { label: '损坏数', value: 1000 },
        ]
    },
    {
        cover: {
            title: '冬季',
            description: '冬季开始，天气寒冷，会有雪和寒风.',
            ltTip: 'Year:2023',
            lbTip: 'Tip:以上都是模拟数据'
        },
        data: [
            { label: '统计数', value: 1000 },
            { label: '优良数', value: 1000 },
            { label: '损坏数', value: 1000, unit: '个' },
        ]
    },
])

const onClick = () => {
    data.value.push({
        cover: {
            title: '冬季',
            description: '冬季开始，天气寒冷，会有雪和寒风.',
            ltTip: 'Year:2024',
            lbTip: 'Tip:以上都是模拟数据'
        },
        data: [
            { label: '统计数', value: 1000 },
            { label: '优良数', value: 1000 },
            { label: '损坏数', value: 1000, unit: '个' },
        ]
    })
}
</script>
<template>
    <div>
        <br />
        <div style="width:90%;margin:0px auto">
            <f-extend-panel v-model:checked="checked" :itemGap="gap" :data="data" :itemScale=".6">
                <!-- <template #cover="item, key">
                    <div class="cover">
                        <div class="cover-title">{{ item?.cover }}</div>
                        <div class="cover-text">{{ item?.content }}</div>
                    </div>
                </template>
                <template #content="item, key">
                    <div class="content">
                        <div class="content-data">
                            <div class="content-data-item" v-for="data in item.data">
                                <div class="content-data-item-label">{{ data.label }}</div>
                                <div class="content-data-item-value">{{ data.value }}</div>
                            </div>
                        </div>
                    </div>
                </template> -->
            </f-extend-panel>
        </div>
        <br />
        <button type="button" @click="onClick">123</button>
    </div>
</template>
<style scoped>
.cover {
    width: 100%;
    padding: 10px;
    cursor: pointer
}

.cover-title {
    font-size: 25px;
    font-weight: 600;
    margin-top: 20px;
}

.cover-text {
    margin-top: 12px;
    font-size: 16px;
    color: #666;
    line-height: 18px;
}

.content {
    width: 100%;
    height: 100%;
    background: #fff;
}

.content-data {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    padding: 0px 10px;
}

.content-data-item {
    flex: 1;
    min-width: 100px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 6px #ccc;
}

.content-data-item+.content-data-item {
    margin-left: 10px;
}

.content-data-item-label {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.content-data-item-value {
    font-size: 26px;
    margin-top: 4px;
    white-space: nowrap;
}
</style>